<template>
  <div class="page" style="padding-bottom: 0;background-color: #ffffff">
    <Navbar showBack title="办公室列表" :showStatusbar="false"/>
    <view class="rental-list">
      <!-- Search Bar -->
      <view class="search-bar">
        <u-search placeholder="搜索小区名称/商圈" v-model="keyword"></u-search>
      </view>
      <!-- Filter Options -->
      <div style="background-color: #fff">
        <u-dropdown>
          <!--      区域、租金、方式、更多、排序-->
          <u-dropdown-item title="区域" :options="areaOptions"></u-dropdown-item>
          <u-dropdown-item title="租金" :options="rentOptions"></u-dropdown-item>
          <u-dropdown-item title="方式" :options="rentTypeOptions"></u-dropdown-item>
          <u-dropdown-item title="更多" :options="moreOptions"></u-dropdown-item>
          <u-dropdown-item title="排序" :options="sortOptions"></u-dropdown-item>
        </u-dropdown>
      </div>
      <div style="flex-grow: 1;overflow:hidden;background-color: #F5F5F5">
        <scroll-view scroll-y class="page-scroll" :style="{ height: '100%' }">
          <view class="house-item" v-for="(item, index) in houseList" :key="index">
            <image class="house-image" :src="item.image" mode="aspectFill" />
            <view class="house-info">
              <text class="house-title">{{ item.title }}</text>
              <view class="house-detail">
                <text class="location">{{ item.location }}</text>
                <view class="line"></view>
                <text class="area">{{ item.area }}m²</text>
                <view class="line"></view>
                <text class="type">{{ item.type }}</text>
              </view>
              <view class="house-price">
                <text class="price">{{ item.price }} <text class="unit">元/月</text></text>

                <text class="unit-price">{{ item.unitPrice }}元/㎡/月</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </div>
    </view>
  </div>
</template>

<script>
import Navbar from "../../components/navbar.vue";

export default {
  components: {Navbar},
  data() {
    return {
      keyword: '',
      areaOptions: [
        { text: '不限', value: 0 },
        { text: '市南区', value: 1 },
        { text: '市北区', value: 2 },
        { text: '李沧区', value: 3 },
        { text: '崂山区', value: 4 },
        { text: '黄岛区', value: 5 },
        { text: '城阳区', value: 6 }
      ],
      rentOptions: [
        { text: '不限', value: 0 },
        { text: '1000元以下', value: 1 },
        { text: '1000-2000元', value: 2 },
        { text: '2000-3000元', value: 3 },
        { text: '3000-5000元', value: 4 },
        { text: '5000-8000元', value: 5 },
        { text: '8000元以上', value: 6 }
      ],
      rentTypeOptions: [
        { text: '不限', value: 0 },
        { text: '整租', value: 1 },
        { text: '合租', value: 2 }
      ],
      moreOptions: [
        { text: '不限', value: 0 },
        { text: '一室', value: 1 },
        { text: '两室', value: 2 },
        { text: '三室', value: 3 },
        { text: '四室及以上', value: 4 },
        { text: '精装修', value: 5 },
        { text: '近地铁', value: 6 },
        { text: '拎包入住', value: 7 },
        { text: '随时看房', value: 8 }
      ],
      sortOptions: [
        { text: '默认排序', value: 0 },
        { text: '价格从低到高', value: 1 },
        { text: '价格从高到低', value: 2 },
        { text: '面积从小到大', value: 3 },
        { text: '面积从大到小', value: 4 }
      ],
      rentProperties: [
        {
          title: '株洲路国际创新园 精装带平台整层',
          specs: '一室一厅/1500平/南北/国际创新园',
          price: '1095000',
          image: '/public/uploads/file/20251/202516259cacc955f9a97.webp'
        },
        {
          title: '亚马逊国际创新园 116544元/年 简装',
          specs: '一室一厅/155平/南/亚马逊国际创新园',
          price: '116544.5',
          image: '/public/uploads/file/20251/202516259cacc955f9a97.webp'
        },
        {
          title: '亚马逊国际创新园 125221元/年 简装',
          specs: '一室一厅/169平/南/亚马逊国际创新园',
          price: '125220.55',
          image: '/public/uploads/file/20251/202516259cacc955f9a97.webp'
        }
      ],
      houseList: [
        {
          image: 'https://ai-public.mastergo.com/ai/img_res/faab719d2878fdd524b6bb067c841acf.jpg',
          title: '河东大厦精装修带家具170平',
          location: '长江路',
          area: '248',
          type: '精装修',
          price: '5000',
          unitPrice: '5000'
        },
        {
          image: 'https://ai-public.mastergo.com/ai/img_res/d083e6080227fed9a632b570a9a4cefb.jpg',
          title: '河东大厦精装修带家具170平',
          location: '长江路',
          area: '248',
          type: '精装修',
          price: '5000',
          unitPrice: '5000'
        }
      ]

    }
  },
  computed: {
  },
  methods: {
    viewPropertyDetail(property) {
      uni.navigateTo({
        url: '/pages/house/detail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.rental-list {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .search-bar {
    margin:24rpx;
  }
  .property-list {
    background-color: #F5F5F5;
    padding: 24rpx;
    .property-item {
      display: flex;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #eee;

      .property-image {
        width: 200rpx;
        height: 150rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }

      .property-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .title {
          font-size: 28rpx;
          font-weight: bold;
        }

        .specs {
          font-size: 24rpx;
          color: #666;
        }

        .price {
          font-size: 28rpx;
          color: #f56c6c;
        }
      }
    }
  }


  .view-all {
    text-align: center;
    padding: 20rpx;
    color: #666;
    font-size: 28rpx;
  }

  .house-item {
    background-color: #FFFFFF;
    border-radius: 12rpx;
    padding: 24rpx;
    margin: 24rpx;
    display: flex;
  }

  .house-image {
    width: 240rpx;
    height: 180rpx;
    border-radius: 12rpx;
    margin-right: 32rpx;
    flex-shrink: 0;
  }

  .house-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .house-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
    margin-bottom: 12rpx;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .house-detail {
    display: flex;
    align-items: center;
    margin-bottom: 12rpx;
  }

  .location, .area, .type {
    font-size: 14px;
    color: #666666;
  }
  .line {
    height: 20rpx;
    width: 2rpx;
    background-color: #DCDCDC;
    margin: 0 24rpx;
  }
  .house-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .price {
    font-size: 20px;
    color: #FF6B6B;
    font-weight: bold;
  }

  .unit {
    font-size: 14px;
    color: #FF6B6B;
    margin-left: 4rpx;
  }

  .unit-price {
    font-size: 14px;
    color: #999999;
    margin-left: 24rpx;
  }
}
</style>
